GitHub Actions入門：CI/CDを30分で構築

GitHub Actionsは、GitHubに統合されたCI/CD（継続的インテグレーション/継続的デリバリー）プラットフォームです。本記事では、30分でCI/CDパイプラインを構築する方法をステップバイステップで解説します。

1. GitHub Actionsとは？

GitHub Actionsは「コードをpushしたら自動でテスト・ビルド・デプロイする」仕組みです。

主要な用語

• Workflow（ワークフロー）：自動化プロセス全体。YAML形式で定義
• Job（ジョブ）：ワークフロー内の実行単位。並列・直列実行可能
• Step（ステップ）：ジョブ内の個別コマンドまたはAction
• Action（アクション）：再利用可能な処理の部品。Marketplaceで共有
• Runner（ランナー）：ワークフローを実行するサーバー

2. ワークフローの基本構造

ワークフローは .github/workflows/ ディレクトリにYAMLファイルとして配置します。

# .github/workflows/ci.yml
name: CI Pipeline

# トリガー: mainブランチへのpushまたはPR時
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18, 20, 22]

    steps:
      # 1. コードをチェックアウト
      - uses: actions/checkout@v4

      # 2. Node.jsのセットアップ
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'

      # 3. 依存関係のインストール
      - run: npm ci

      # 4. Lintの実行
      - run: npm run lint

      # 5. テストの実行
      - run: npm test

      # 6. ビルドの確認
      - run: npm run build

3. テスト自動化の実装

PRが作成されたら自動でテストを実行し、結果をPRにコメントする実践的なワークフローです。

# .github/workflows/test-report.yml
name: Test with Coverage Report

on:
  pull_request:
    branches: [ main ]

jobs:
  test-coverage:
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - run: npm ci
      - run: npm test -- --coverage --coverageReporters=text

      # テスト結果をPRにコメント
      - name: Comment Coverage on PR
        if: github.event_name == 'pull_request'
        uses: actions/github-script@v7
        with:
          script: |
            const fs = require('fs');
            const coverage = '✅ テスト完了！';
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: coverage
            })

4. 自動デプロイの設定

mainブランチにマージされたら自動で本番デプロイするワークフローです。

# .github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    # testジョブが成功した後にのみ実行
    needs: test

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - run: npm ci
      - run: npm run build

      # GitHub Pagesにデプロイ
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

      # Slack通知
      - name: Notify on Success
        if: success()
        run: |
          echo "✅ デプロイ完了！"

5. 実践Tips

キャッシュで高速化

# npm依存関係のキャッシュ（自動）
- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'npm'  # これだけでキャッシュ有効化

シークレットの管理

APIキーやパスワードはGitHub Secretsに保存し、ワークフローから安全に参照できます。

1. リポジトリの Settings → Secrets and variables → Actions
2. 「New repository secret」をクリック
3. 名前と値を入力して保存
4. ワークフローから ${{ secrets.SECRET_NAME }} で参照

まとめ

GitHub Actionsを使えば、以下のCI/CDパイプラインが30分で構築できます：

1. PR作成時：自動テスト + カバレッジレポート
2. マージ時：自動ビルド + 自動デプロイ
3. エラー時：Slack/メール通知

まずは小さなワークフローから始めて、徐々に拡張していきましょう。